<div class="content-section introduction">
    <div class="feature-intro">
        <h1>ContextMenu</h1>
        <p>ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the with context menu support.</p>
    </div>
</div>

<div class="content-section implementation">    
    <div class="card">
        <img #img src="assets/showcase/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true">
        <p-contextMenu [target]="img" [model]="items"></p-contextMenu>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;ContextMenuModule&#125; from 'primeng/contextmenu';
import &#123;MenuItem&#125; from 'primeng/api';
</app-code>

            <h5>MenuModel API</h5>
            <p>ContextMenu uses the common menumodel api to define its items, visit <a [routerLink]="['/menumodel']">MenuModel API</a> for details.</p>

            <h5>Getting Started</h5>
            <p>ContextMenu requires nested menuitems as its model and in its simplest form ContextMenu is attached to the document with global setting. .</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-contextMenu [global]="true" [model]="items"&gt;&lt;/p-contextMenu&gt;
</app-code>

            <h5>Target</h5>
            <p>ContextMenu can be attached to a particular element whose local template variable name is defined using the <i>target</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-contextMenu [target]="img" [model]="items2" &gt;&lt;/p-contextMenu&gt;

&lt;img #img src="assets/showcase/images/primeng.svg" alt="Logo"&gt;
</app-code>

            <h5>Exclusive Integrations</h5>
            <p>Some components like Table require special attention so they provide a different method to attach a context menu. Refer to 
            individual documentation of components with special integration like Table.</p>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ContextMenuDemo &#123;

    private items: MenuItem[];

    ngOnInit() &#123;
        this.items = [
            &#123;
                label: 'File',
                items: [&#123;
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            &#123;label: 'Project'&#125;,
                            &#123;label: 'Other'&#125;,
                        ]
                    &#125;,
                    &#123;label: 'Open'&#125;,
                    &#123;label: 'Quit'&#125;
                ]
            &#125;,
            &#123;
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    &#123;label: 'Delete', icon: 'pi pi-fw pi-trash'&#125;,
                    &#123;label: 'Refresh', icon: 'pi pi-fw pi-refresh'&#125;
                ]
            &#125;
        ];
    &#125;
&#125;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>model</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of menuitems.</td>
                        </tr>
                        <tr>
                            <td>global</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Attaches the menu to document instead of a particular item.</td>
                        </tr>
                        <tr>
                            <td>target</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Local template variable name of the element to attach the context menu.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).</td>
                        </tr>
                        <tr>
                            <td>baseZIndex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Base zIndex value to use in layering.</td>
                        </tr>
                        <tr>
                            <td>autoZIndex</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to automatically manage layering.</td>
                        </tr>
                        <tr>
                            <td>triggerEvent</td>
                            <td>string</td>
                            <td>contextmenu</td>
                            <td>Event for which the menu must be displayed.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onShow</td>
                            <td>-</td>
                            <td>Callback to invoke when context menu is shown.</td>
                        </tr>
                        <tr>
                            <td>onHide</td>
                            <td>-</td>
                            <td>Callback to invoke when context menu is hidden.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>toggle</td>
                            <td>event (optional): mouse event</td>
                            <td>Toggles the visibility of the popup menu.</td>
                        </tr>
                        <tr>
                            <td>show</td>
                            <td>event: browser event</td>
                            <td>Displays the popup menu.</td>
                        </tr>
                        <tr>
                            <td>hide</td>
                            <td>-</td>
                            <td>Hides the popup menu.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Element</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>p-contextmenu</td>
                        <td>Container element.</td>
                    </tr>
                    <tr>
                        <td>p-menu-list</td>
                        <td>List element.</td>
                    </tr>
                    <tr>
                        <td>p-menuitem</td>
                        <td>Menuitem element.</td>
                    </tr>
                    <tr>
                        <td>p-menuitem-text</td>
                        <td>Label of a menuitem.</td>
                    </tr>
                    <tr>
                        <td>p-menuitem-icon</td>
                        <td>Icon of a menuitem.</td>
                    </tr>
                    <tr>
                        <td>p-submenu-icon</td>
                        <td>Arrow icon of a submenu.</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/contextmenu" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-contextmenu-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;img #img src="assets/showcase/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true"&gt;
&lt;p-contextMenu [target]="img" [model]="items"&gt;&lt;/p-contextMenu&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ContextMenuDemo &#123;

    items: MenuItem[];

    ngOnInit() &#123;
        this.items = [
            &#123;
               label:'File',
               icon:'pi pi-fw pi-file',
               items:[
                  &#123;
                     label:'New',
                     icon:'pi pi-fw pi-plus',
                     items:[
                        &#123;
                           label:'Bookmark',
                           icon:'pi pi-fw pi-bookmark'
                        &#125;,
                        &#123;
                           label:'Video',
                           icon:'pi pi-fw pi-video'
                        &#125;,

                     ]
                  &#125;,
                  &#123;
                     label:'Delete',
                     icon:'pi pi-fw pi-trash'
                  &#125;,
                  &#123;
                     separator:true
                  &#125;,
                  &#123;
                     label:'Export',
                     icon:'pi pi-fw pi-external-link'
                  &#125;
               ]
            &#125;,
            &#123;
               label:'Edit',
               icon:'pi pi-fw pi-pencil',
               items:[
                  &#123;
                     label:'Left',
                     icon:'pi pi-fw pi-align-left'
                  &#125;,
                  &#123;
                     label:'Right',
                     icon:'pi pi-fw pi-align-right'
                  &#125;,
                  &#123;
                     label:'Center',
                     icon:'pi pi-fw pi-align-center'
                  &#125;,
                  &#123;
                     label:'Justify',
                     icon:'pi pi-fw pi-align-justify'
                  &#125;,

               ]
            &#125;,
            &#123;
               label:'Users',
               icon:'pi pi-fw pi-user',
               items:[
                  &#123;
                     label:'New',
                     icon:'pi pi-fw pi-user-plus',

                  &#125;,
                  &#123;
                     label:'Delete',
                     icon:'pi pi-fw pi-user-minus',

                  &#125;,
                  &#123;
                     label:'Search',
                     icon:'pi pi-fw pi-users',
                     items:[
                        &#123;
                           label:'Filter',
                           icon:'pi pi-fw pi-filter',
                           items:[
                              &#123;
                                 label:'Print',
                                 icon:'pi pi-fw pi-print'
                              &#125;
                           ]
                        &#125;,
                        &#123;
                           icon:'pi pi-fw pi-bars',
                           label:'List'
                        &#125;
                     ]
                  &#125;
               ]
            &#125;,
            &#123;
               label:'Events',
               icon:'pi pi-fw pi-calendar',
               items:[
                  &#123;
                     label:'Edit',
                     icon:'pi pi-fw pi-pencil',
                     items:[
                        &#123;
                           label:'Save',
                           icon:'pi pi-fw pi-calendar-plus'
                        &#125;,
                        &#123;
                           label:'Delete',
                           icon:'pi pi-fw pi-calendar-minus'
                        &#125;,

                     ]
                  &#125;,
                  &#123;
                     label:'Archieve',
                     icon:'pi pi-fw pi-calendar-times',
                     items:[
                        &#123;
                           label:'Remove',
                           icon:'pi pi-fw pi-calendar-minus'
                        &#125;
                     ]
                  &#125;
               ]
            &#125;,
            &#123;
               separator:true
            &#125;,
            &#123;
               label:'Quit',
               icon:'pi pi-fw pi-power-off'
            &#125;
         ];
    &#125;

&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-contextmenu-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
